<template>
  <div class="home">
    <!-- 折扣 -->
      <div class="discount">
        <div class="discount-title clearfix">
          <router-link
          to="/" tag="span"
          class="mui-icon mui-icon-arrowleft"></router-link>
          <h2 class="">省钱控,最新优惠</h2>
        </div>
        <div class="discount-content" id="refreshContainer">
            <ul class="mui-table-view "
              v-infinite-scroll="loadMore"
              infinite-scroll-disabled="loading"
              infinite-scroll-distance="10"
            >
              <li class="mui-table-view-cell mui-media" v-for="(item ,index) in discountList" :key="item.productId">
                  <router-link :to="'/limitMoneySonInfo/productid='+setProductHref(index)">
                      <img class="mui-media-object mui-pull-left" 
                      v-lazy="imgUrl(index)"
                      >
                      <div class="mui-media-body">
                          <p class="productName">
                            {{item.productName}}
                          </p>
                          <p class="productPrice">
                            {{item.productPinkage}}
                          </p>
                          <p class='mui-ellipsis productSmall'>
                            <span>{{item.productFrom}}</span>
                            |
                            <span>
                              {{item.productTime}}
                            </span>
                          </p>
                      </div>
                  </router-link>
              </li>
            </ul>
        </div>
      </div>
      <mm-pagenation></mm-pagenation>
    <mm-footer></mm-footer>
  </div>
</template>
<script>
import mmFooter from "./publicComponents/mmFooter.vue"
import mmPagenation from "./publicComponents/mmPagenation.vue"
import mui from '../lib/mui/js/mui.min.js'
import { Toast } from 'mint-ui';
export default {
  data() {
    return {
      menuList: [],
      firstList: [],
      nextList: [],
      discountList: [],
      productiid: 0,
      loading: true,
      getCount: 0
    }
  },
  created() {
    this.getDiscountList(this.getCount)
  },
  methods: {
    setHref(i) {
      var cc =''
      this.firstList.forEach(function(item ,index) {
        if(i === index) {
          cc = item.titlehref
          var num = cc.indexOf('.')
          cc = cc.slice(0 ,num)
          cc = '/' + cc
        }
      })
        console.log(cc)
        return cc
    },
    imgName: function(i) {
      var str = "";
      this.menuList.forEach(function(item, index) {
        if (i === index) {
          var count = item.img.indexOf('"');
          var str1 = item.img.slice(count + 1);
          var str2 = item.img.substr(0, count + 1);
          str = str2 + "../" + str1;
          return true;
        }
      });
      return str;
    },
    getDiscountList(num) {
      if(num === 4) {
        Toast({
          message: '已经莫得了哦',
          position: 'middle',
          duration: 5000
        })
        return
      }
      this.$http.get("api/getmoneyctrl?pageid="+num).then(res => {
        var list = res.body.result
        this.discountList = this.discountList.concat(list)
        // console.log(this.discountList)
        this.loading = false;        
      })
    },
    imgUrl(i) {
      var strReturn = ''
      this.discountList.forEach(function (item ,index) {
        if(index === i) {
          // console.log(item.productImgSm)
          var str = item.productImgSm
          var cc = str.indexOf('imgurl=')
          var strFont = str.slice(0, cc +1)
          var strBack = str.slice(cc+7)
          var strBackcount = strBack.indexOf('"')
          strReturn = strBack.slice(0 , strBackcount)
          return true
        }
      })
      return strReturn
    },
    setProductHref(i) {
      var id = 0
      this.discountList.forEach((item ,index) => {
        if(i === index) {
          id = item.productId
          return
        }
      })
      return id
    },
    loadMore() {
      this.loading = true;
      this.getCount ++ 
      this.getDiscountList(this.getCount)
    }
  },
  components: {
    mmFooter,
    mmPagenation
  }
};
</script>
<style lang="less" scoped>
@import "../../src/less/var";
.home {
  overflow: hidden;
  .discount {
    .discount-title {
      height: 98 / @base;
      padding: 10 / @base 15 / @base;
      background-color: #ff9e20;
      position: relative;
      h2 {
        font-size: 28 / @base;
        height: 100%;
        line-height: 70 / @base;
        margin: 0;
        text-align: center;
        margin: 0 auto;
      }
      span {
        font-size: 40 / @base;
        height: 100%;
        line-height: 70 / @base;
        position: absolute;
        left: 20/@base;
      }
    }
    .discount-content {
      position: relative;
      .mui-table-view .mui-media-object {
        line-height: 200/@base;
        max-width: 200/@base;
        height: 200/@base;
      }
      .mui-table-view .mui-media, .mui-table-view .mui-media-body {
        p.productName {
          font-size: 26/@base;
          font-weight: 700;
          line-height: 1.5;
          height: 80/@base;
        }
        p.productPrice {
          font-size: 24/@base;
          color: red;
          margin-top: 12/@base;
        }
      }
      p {
        font-size: 20/@base;
      }
      p.productSmall {
        position: absolute;
        bottom: 20/@base;
      }
      .mui-table-view-cell>a:not(.mui-btn) {
        white-space: unset;
      }
    }
  }
}
</style>
